<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.wrapper {
			display: flex;
			margin: 50px auto;
			width: 800px;
			overflow: hidden;
			/*   resize: horizontal; */
			border-radius: 8px;
			padding: 15px;
			box-shadow: 20px 20px 60px #bebebe,
				-20px -20px 60px #ffffff;
		}

		.text {
			font-size: 20px;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: justify;
			/* 	display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical; */
			position: relative;
			line-height: 1.5;
			max-height: 4.5em;
			transition: .3s max-height;
		}

		.text::before {
			content: '';
			height: calc(100% - 26px);
			float: right;
		}

		.text::after {
			content: '';
			width: 999vw;
			height: 999vw;
			position: absolute;
			box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
			margin-left: -100px;
		}

		.btn {
			position: relative;
			float: right;
			clear: both;
			margin-left: 20px;
			font-size: 16px;
			padding: 0 8px;
			background: #3F51B5;
			line-height: 26px;
			height: 26px;
			border-radius: 4px;
			color: #fff;
			cursor: pointer;
			/* 或者用margin负值*/
			/* margin-top: -30px; */
		}

		.btn::after {
			content: '展开'
		}

		.exp {
			display: none;
		}

		.exp:checked+.text {
			max-height: none;
			max-height: 400px;
			/*超出最大行高度就可以了*/
		}

		.exp:checked+.text::after {
			visibility: hidden;
		}

		.exp:checked+.text .btn::before {
			visibility: hidden;
		}

		.exp:checked+.text .btn::after {
			content: '收起'
		}

		.btn::before {
			content: '...';
			position: absolute;
			left: -5px;
			color: #333;
			transform: translateX(-100%)
		}
	</style>
	<body>
		<div class="wrapper">
			<input id="exp1" class="exp" type="checkbox">
			<div class="text">
				<label class="btn" for="exp1"></label>

				汴京发生了一宗离奇命案，众捕头全无头绪，一人出现了，大家登时欣喜若狂，来者正是被誉为大宋第一聪明人，
				这两年屡破奇案的人！他，就是公孙策！公孙策没辜负众望，瞬间已抓出真凶！屡破奇案的大宋第一聪明人，不该是包拯吗？
				为什么会变成了公孙策？原来包拯已失踪两年多了！两年前，包拯忽接到一封信，便急急离开家园，之后便音讯全无！这些年里，
				每当有奇案发生，公孙策便会赶赴现场，目的，其实是为了寻找包拯！宋、辽边境仍频有冲突。当年宋太祖杯酒释兵权，令宋人尚文轻武，
				至国力日弱。这些年，幸得庞太师之子庞统领兵力抗，辽人才愿意和谈！
			</div>
		</div>

		<div class="wrapper">
			<input id="exp2" class="exp" type="checkbox">
			<div class="text">

				<label class="btn" for="exp2"></label>
				汴京发生了一宗离奇命案
			</div>
		</div>
	</body>
</html>
